<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Confirmar pago</h3>
    </div>
    <div class="panel-body">
        <form id="frmConfirmarPago" class="form-horizontal" method="POST" role="form">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Descripcion</th>
                            <th>
                                <abbr title="Precio Unitario">PU</abbr>
                            </th>
                            <th>Cantidad</th>
                            <th>Importe</th>
                        </tr>
                    </thead>
                    <tbody>
                        {table_content}
                    </tbody>
                </table>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Paga con...</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label for="txtSubTotal" class="col-sm-offset-7 col-sm-2 control-label">Subtotal</label>
                        <div class="col-sm-3">
                            <input type="number" class="form-control" id="txtSubTotal" name="txtSubTotal" value="{SubTotal}" min="0.05" step="0.05" readonly="readonly" placeholder="Subtotal" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtPaga" class="col-sm-offset-7 col-sm-2 control-label">Paga</label>
                        <div class="col-sm-3">
                            <input type="number" class="form-control" id="txtPaga" name="txtPaga" min="0.05" step="0.05" required="required" placeholder="Paga" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtVuelto" class="col-sm-offset-7 col-sm-2 control-label">Vuelto</label>
                        <div class="col-sm-3">
                            <input type="number" class="form-control" id="txtVuelto" name="txtVuelto" min="0.05" step="0.05" readonly="readonly" placeholder="Vuelto" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-10 col-sm-1">
                            <button type="submit" class="btn btn-success" name="btnCobrar">Cobrar</button>
                        </div>
                        <div class="col-sm-1">
                            <a class="btn btn-danger" href="index.php?do=/caja/index">Volver</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $('#txtPaga').keyup(function() {
        var subtotal = $('#txtSubTotal').val();
        var paga = $(this).val();

        $('#txtVuelto').val((paga - subtotal).toFixed(2));
    });
    
    $("#frmConfirmarPago").submit(function(e) {
        var subtotal = $("#txtSubTotal").val();
        var paga = $("#txtPaga").val();
        
        if((paga - subtotal) < 0) {
            e.preventDefault();
            alert("Cantidad de dinero a pagar es menor al subtotal.");
        }
    });
</script>